<template>
    <div class="appContainer">
	    <router-view></router-view>
      <van-tabbar v-model="active">
        <van-tabbar-item v-for="(item, index) in tabbber" :icon="item.icon" :active="index" @click="changeFunc(index,item.uri)">{{item.name}}</van-tabbar-item>
      </van-tabbar>
    </div>
</template>

<style scoped lang="scss">
  .appContainer{
    height: 100%;
    clear: both;
  }
</style>

<script>

export default {
  data() {
    return {
      active: 0,
      tabbber: [
        {icon: 'wap-home-o',uri: '/home',name: '首页'},
        // {icon: 'search',uri: '/search',name: '超级搜索'},
        // {icon: 'search',uri: '/optional',name: '超级搜索'},
        {icon: 'like-o',uri: '/groom',name: '好券推荐'},
        {icon: 'apps-o',uri: '/cats',name: '分类'},
        //{icon: 'cash-back-record',uri: '/coupon',name: '直达领券'},
        {icon: 'contact',uri: '/field',name: '我的'},
        // {icon: 'search',uri: '/optional',name: '推广导购'},
      ]
    };
  },
  methods: {
    changeFunc(active,uri){
      this.active = active;
      this.$router.push({path: uri})
    }
  },
  mounted() {
  },
  watch:{
    $route(to,from){
      
      switch (to.path) {
        case '/home':
          this.active = 0;
          break;
        case '/groom':
          this.active = 1;
          break;
        case '/cats':
          this.active = 2;
          break;
        case '/field':
          this.active = 3;
          break;
        default:
          this.active = -1;
          break;
      }
    }
  }
};
</script>
